<template>
  <div class="food_container">
    <head-top :head-title="headTitle" goBack="true"></head-top>
    <!--分类/排序/筛选-->
    <section class="sort_container">
      <!--分类 sortBy=='food'的类型，控制对应detail项的展开或隐藏
      sortBy置为空的时候点击收起，sorBy值为"food"时点击展示food对应项-->
      <div class="sort_item" :class="{choose_type:sortBy == 'food'}">
        <!--标题，点击触发chooseType控制内容的隐藏和显示-->
        <div class="sort_item_container" @click="chooseType('food')">
          <div class="sort_item_border">
            <!--标题-->
            <span :class="{category_title: sortBy == 'food'}">{{foodTitle}}</span>
            <!--绘制下拉箭头-->
            <svg
              width="10"
              height="10"
              xmlns="http://www.w3.org/2000/svg"
              version="1.1"
              class="sort_icon"
            >
              <polygon points="0,3 10,3 5,8" />
            </svg>
          </div>
        </div>
        <!--内容项 category为拿到的数据，拿到分类数据后执行-->
        <transition name="showlist" v-show="category">
          <!--sortBy有值时展示，sorBy为空时隐藏-->
          <section v-show="sortBy == 'food'" class="category_container sort_detail_type">
            <!--第一项展开的内容分为两部分-->
            <!--左侧分类条目 start-->
            <section class="category_left">
              <ul>
                <!--点击左侧menu,传入当前项id和当前项在list中的位置
                在右侧筛选详情部分展示与index对应的sub_categories-->
                <li
                  v-for="(item, index) in category"
                  :key="index"
                  class="category_left_li"
                  :class="{category_active:restaurant_category_id == item.id}"
                  @click="selectCategoryName(item.id, index)"
                >
                  <!--图标名字-->
                  <section>
                    <img :src="getImgPath(item.image_url)" v-if="index" class="category_icon" />
                    <span>{{item.name}}</span>
                  </section>
                  <section>
                    <!--数量-->
                    <span class="category_count">{{item.count}}</span>
                    <!--绘制向右侧的小箭头-->
                    <svg
                      v-if="index"
                      width="8"
                      height="8"
                      xmlns="http://www.w3.org/2000/svg"
                      version="1.1"
                      class="category_arrow"
                    >
                      <path d="M0 0 L6 4 L0 8" stroke="#bbb" stroke-width="1" fill="none" />
                    </svg>
                  </section>
                </li>
              </ul>
            </section>
            <!--左侧分类条目 end-->
            <!--右侧展示条目 start-->
            <section class="category_right">
              <ul>
                <!--点击右侧具体筛选项，传入该项name值，id值。name值为替换“分类”文字进行筛选
                    category_right_choosed:选中状态，初始状态index=0,restaurant_category_ids选中；
                    点击时restaurant_category_ids == item.id选中;
                -->
                <div v-for="(item, index) in categoryDetail" :key="index">
                  <li
                    v-if="index"
                    class="category_right_li"
                    @click="getCategoryIds(item.id, item.name)"
                    :class="{category_right_choosed: restaurant_category_ids == item.id || (!restaurant_category_ids)&&index == 0}"
                  >
                    <span>{{item.name}}</span>
                    <span>{{item.count}}</span>
                  </li>
                </div>
              </ul>
            </section>
            <!--右侧展示条目 end-->
          </section>
        </transition>
      </div>
      <!-- 排序 start-->
      <div class="sort_item" :class="{choose_type:sortBy == 'sort'}">
        <!--触发部分 start-->
        <div class="sort_item_container" @click="chooseType('sort')">
          <div class="sort_item_border">
            <!--名字-->
            <span :class="{category_title: sortBy == 'sort'}">排序</span>
            <svg
              width="10"
              height="10"
              xmlns="http://www.w3.org/2000/svg"
              version="1.1"
              class="sort_icon"
            >
              <polygon points="0,3 10,3 5,8" />
            </svg>
          </div>
        </div>
        <!--触发部分 end-->
        <!--触发后展示的下拉列表 start-->
        <transition name="showlist">
          <!--sortBy值为sort时，列表展示，sortBy重新置空之后，再点击该部分隐藏-->
          <section v-show="sortBy == 'sort'" class="sort_detail_type">
            <!--作用在于，点击时，找到某个li的p。根据data值的不同，以不同的排序方式重新进行排序-->
            <ul class="sort_list_container" @click="sortList($event)">
              <!--智能排序 start-->
              <li class="sort_list_li">
                <!--绘制该分类的图标 start-->
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#default" />
                </svg>
                <!--绘制该分类的图标 end-->
                <p data="0" :class="{sort_select: sortByType == 0}">
                  <span>智能排序</span>
                  <!--点击"智能排序"li绘制的图标，即打勾符号-->
                  <svg v-if="sortByType == 0">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected" />
                  </svg>
                </p>
              </li>
              <!--智能排序 end-->
              <!--距离最近 start-->
              <li class="sort_list_li">
                <!-- 绘制该分类的图标 start-->
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#distance" />
                </svg>
                <!-- 绘制该分类的图标 end-->
                <p data="5" :class="{sort_select: sortByType == 5}">
                  <span>距离最近</span>
                  <!-- 点击了"距离最近"排序后，绘制的图标，即打勾符号-->
                  <svg v-if="sortByType == 5">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected" />
                  </svg>
                </p>
              </li>
              <!--距离最近 end-->
              <!--销量最高 start-->
              <li class="sort_list_li">
                <!-- 绘制销量最高的图标 start -->
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hot" />
                </svg>
                <!-- 绘制销量最高的图标 end -->
                <p data="6" :class="{sort_select: sortByType == 6}">
                  <span>销量最高</span>
                  <!-- 点击了"销量最高"排序绘制的图标，即打勾符号-->
                  <svg v-if="sortByType == 6">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected" />
                  </svg>
                </p>
              </li>
              <!--销量最高 end-->
              <!--起送价最低 start-->
              <li class="sort_list_li">
                <!-- 绘制该分类的图标 start -->
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#price" />
                </svg>
                <!-- 绘制该分类的图标 end -->
                <p data="1" :class="{sort_select: sortByType == 1}">
                  <span>起送价最低</span>
                  <!-- 点击了起送价最低之后绘制的图标，即打勾符号-->
                  <svg v-if="sortByType == 1">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected" />
                  </svg>
                </p>
              </li>
              <!--起送价最低 end-->
              <!--配送速度最快 start-->
              <li class="sort_list_li">
                <!-- 绘制该分类的图标 start-->
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed" />
                </svg>
                <!-- 绘制该分类的图标 end-->
                <p data="2" :class="{sort_select: sortByType == 2}">
                  <span>配送速度最快</span>
                  <!-- 点击"配送速度最快"之后绘制的图标，即打勾符号-->
                  <svg v-if="sortByType == 2">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected" />
                  </svg>
                </p>
              </li>
              <!--配送速度最快 end-->
              <!--评分最高 start-->
              <li class="sort_list_li">
                <!-- 绘制该分类的图标 start-->
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating" />
                </svg>
                <!-- 绘制该分类的图标 end-->
                <p data="3" :class="{sort_select: sortByType == 3}">
                  <span>评分最高</span>
                  <!-- 点击了评分最高之后绘制的图标，即打勾符号-->
                  <svg v-if="sortByType == 3">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected" />
                  </svg>
                </p>
              </li>
              <!--评分最高 end-->
            </ul>
          </section>
        </transition>
        <!--触发后展示的下拉列表 end-->
      </div>
      <!--排序 end-->
      <!-- 筛选 start-->
      <div class="sort_item" :class="{choose_type:sortBy == 'activity'}">
        <!--触发部分 start
            chooseType方法通过改变sortBy值，控制列表的隐藏和显示
        -->
        <div class="sort_item_container" @click="chooseType('activity')">
          <span :class="{category_title: sortBy == 'activity'}">筛选</span>
          <!--绘制箭头-->
          <svg
            width="10"
            height="10"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            class="sort_icon"
          >
            <polygon points="0,3 10,3 5,8" />
          </svg>
        </div>
        <!--触发部分 end-->
        <!--触发后展示部分 start-->
        <transition name="showlist">
          <section v-show="sortBy == 'activity'" class="sort_detail_type filter_container">
            <!--配送方式 s-->
            <section style="width: 100%;">
              <header class="filter_header_style">配送方式</header>
              <ul class="filter_ul">
                <!--点击时执行selectDeliveryMode,进行选择和取消选择-->
                <li
                  v-for="(item, index) in Delivery"
                  :key="index"
                  class="filter_li"
                  @click="selectDeliveryMode(item.id)"
                >
                  <!--绘制该配送方式的图标，未选中时delivery_mode为0,不透明度为1-->
                  <!--delivery_mode == item.id时，当前为选中状态，图标为选中图标-->
                  <svg :style="{opacity: (item.id == 0)&&(delivery_mode !== 0)? 0: 1}">
                    <use
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      :xlink:href="delivery_mode == item.id? '#selected':'#fengniao'"
                    />
                  </svg>
                  <!--若为选中状态，改变文本的颜色-->
                  <span :class="{selected_filter: delivery_mode == item.id}">{{item.text}}</span>
                </li>
              </ul>
            </section>
            <!--配送方式 end-->
            <!--商家属性 start-->
            <section style="width: 100%;">
              <header class="filter_header_style">商家属性（可以多选）</header>
              <ul class="filter_ul" style="paddingBottom: .5rem;">
                <!--selectSupportIds点击时传入当前项的下标和id,实现多选-->
                <li
                  v-for="(item,index) in Activity"
                  :key="index"
                  class="filter_li"
                  @click="selectSupportIds(index, item.id)"
                >
                  <!--support_ids的status为true时表示选中状态,绘制选中状态时的图标-->
                  <svg v-show="support_ids[index].status" class="activity_svg">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected" />
                  </svg>
                  <!--status值为false,不绘制选中状态的图标，而是绘制该activity的name的简写-->
                  <span
                    class="filter_icon"
                    :style="{color: '#' + item.icon_color, borderColor: '#' + item.icon_color}"
                    v-show="!support_ids[index].status"
                  >{{item.icon_name}}</span>
                  <!--selected_filter标记选中状态的文字颜色-->
                  <span :class="{selected_filter: support_ids[index].status}">{{item.name}}</span>
                </li>
              </ul>
            </section>
            <!--商家属性 end-->
            <!--清除和确认 start-->
            <footer class="confirm_filter">
              <div class="clear_all filter_button_style" @click="clearSelect">清空</div>
              <div class="confirm_select filter_button_style" @click="confirmSelectFun">
                确定
                <!--展示已选定的个数-->
                <span v-show="filterNum">({{filterNum}})</span>
              </div>
            </footer>
            <!--清除和确认 end-->
          </section>
        </transition>
        <!--触发后展示部分 end-->
      </div>
      <!-- 筛选 end-->
    </section>
    <!--点击后与下拉列表一同出现的遮罩层-->
    <transition name="showcover">
      <div class="back_cover" v-show="sortBy"></div>
    </transition>
    <section class="shop_list_container">
      <shop-list
        :geohash="geohash"
        :restaurantCategoryId="restaurant_category_id"
        :restaurantCategoryIds="restaurant_category_ids"
        :sortByType="sortByType"
        :deliveryMode="delivery_mode"
        :confirmSelect="confirmStatus"
        :supportIds="support_ids"
        v-if="latitude"
      ></shop-list>
    </section>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import headTop from "src/components/header/head";
import shopList from "../../components/common/shopList";
// import shopList from "src/components/common/shoplist";
//引入处理图片路径的方法
import { getImgPath } from "src/components/common/mixin";
/**
 * 引入获取分类数据(foodCategory)的方法
 * 引入获取配送方式数据的方法foodDelivery;
 * 引入获取商家支持活动的数据的方法foodActivity
 */
import {
  msiteAddress,
  foodCategory,
  foodDelivery,
  foodActivity,
} from "src/service/getData";

export default {
  data() {
    return {
      geohash: "", // city页面传递过来的地址geohash
      headTitle: "", // msiet页面头部标题
      foodTitle: "", // 排序左侧头部标题
      restaurant_category_id: "", // 食品类型id值
      restaurant_category_ids: "", //筛选类型的id
      sortBy: "", // 筛选的条件
      category: null, // category分类左侧数据
      categoryDetail: null, // category分类右侧的详细数据
      sortByType: null, // 根据何种方式排序
      Delivery: null, // 配送方式数据
      Activity: null, // 商家支持活动数据
      delivery_mode: null, // 选中的配送方式
      support_ids: [], // 选中的商铺活动列表
      filterNum: 0, // 所选中的所有样式的集合
      confirmStatus: false, // 确认选择
    };
  },
  created() {
    this.initData();
  },
  //getImgPath方法的调用需要引入mixins
  mixins: [getImgPath],
  //引入头部组件和商家物品组件
  components: {
    headTop,
    shopList,
  },
  computed: {
    ...mapState(["latitude", "longitude"]),
  },
  methods: {
    ...mapMutations(["RECORD_ADDRESS"]),
    //初始化获取数据
    async initData() {
      //获取从msite页面传递过来的参数
      this.geohash = this.$route.query.geohash;
      //初始化时第一个筛选条目的名字和标题相等
      this.headTitle = this.$route.query.title;
      this.foodTitle = this.headTitle;
      //初始的食品类型id来自于上个页面(msite.vue)点击某个nav时传递过来的值
      this.restaurant_category_id = this.$route.query.restaurant_category_id;
      //防止刷新页面时，vuex状态丢失，经度纬度需要重新获取，并存入vuex
      if (!this.latitude) {
        //获取位置信息
        let res = await msiteAddress(this.geohash);
        // 记录当前经度纬度进入vuex
        this.RECORD_ADDRESS(res);
      }
      //初始化的时候获取分类数据，调用foodCategory，需要传入坐标
      this.category = await foodCategory(this.latitude, this.longitude);
      // test
      // console.log(this.category);
      //初始化时定位当前category分类左侧默认选择项，在右侧展示出其sub_categories列表
      this.category.forEach((item) => {
        if (this.restaurant_category_id == item.id) {
          this.categoryDetail = item.sub_categories;
        }
      });
      //获取筛选列表的配送方式
      this.Delivery = await foodDelivery(this.latitude, this.longitude);
      //获取筛选列表的商铺活动
      this.Activity = await foodActivity(this.latitude, this.longitude);
      /**
       * 记录support_ids的状态，默认不选中，点击状态取反，status为true时为选中状态
       * supports_ids中存放status,来标记选中状态
       * id:和获取到的活动数据的id相等
       * supports_ids的长度和Activity的长度相等，下标也与之对应
       */
      this.Activity.forEach((item, index) => {
        this.support_ids[index] = { status: false, id: item.id };
      });
    },
    // 点击顶部三个选项，展示不同的列表，选中当前选项进行展示，同时收回其他选项
    async chooseType(type) {
      if (this.sortBy !== type) {
        //第一次点击之后sorBy值为type的值为food(若点击其他筛选项就是其他筛选项的值)
        this.sortBy = type;
        //food选项中头部标题发生改变，需要特殊处理，点击的是第一项，一个筛选条目的名字变成"分类"
        if (type == "food") {
          this.foodTitle = "分类";
        } else {
          //点击其他两个条目，将foodTitle 和 headTitle 进行同步
          this.foodTitle = this.headTitle;
        }
      } else {
        //再次点击相同选项时收回列表
        this.sortBy = "";
        if (type == "food") {
          //若点击的是第一个条目，筛选项的名字由分类--->原来的名字
          this.foodTitle = this.headTitle;
        }
      }
    },
    /**
     * 选中Category左侧列表的某个选项时，右侧渲染相应的sub_categories列表
     * 点击对应类型食品，传入selectCategoryName(item.id,index),该项的id值
     * 以及该项在list中的下标值
     */
    selectCategoryName(id, index) {
      /**
       * 第一个选项 -- 全部商家 因为没有自己的列表，所以点击则默认获取选所有数据
       * 点击全部时，下拉的详情应进行隐藏
       */
      if (index === 0) {
        //重新置空筛选类型id,和控制下拉内容隐藏显示的sortBy
        this.restaurant_category_ids = null;
        this.sortBy = "";
        //不是第一个选项时，右侧展示其子级sub_categories的列表
      } else {
        //不是第一个选项时，右侧展示其index对应子级sub_categories的列表
        this.restaurant_category_id = id;
        this.categoryDetail = this.category[index].sub_categories;
      }
    },
    //选中Category右侧列表的某个选项时，进行筛选，重新获取数据并渲染
    getCategoryIds(id, name) {
      // console.log(id, name);
      //点击时传入详情(来自sub_categories)的id值，和name值
      //筛选项id置位点击项的id,状态为选中状态，添加有class:category_right_choosed
      this.restaurant_category_ids = id;
      //收起下拉内容
      this.sortBy = "";
      //将筛选条目的名称,以及当前页面的title改为当前点击项的name值
      this.foodTitle = this.headTitle = name;
    },
    //点击某个排序方式，获取事件对象的data值，并根据获取的值重新获取数据渲染
    sortList(event) {
      let node;
      // 如果点击的是 span 中的文字，则需要获取到 span 的父标签 p
      if (event.target.nodeName.toUpperCase() !== "P") {
        node = event.target.parentNode;
      } else {
        node = event.target;
      }
      /**
       * 以上代码的作用在于确认找到的元素是p标签
       * getAttribute() 方法返回指定属性名的属性值。
       * 获取p的data属性，该属性标记了不同的排序方式
       */
      this.sortByType = node.getAttribute("data");
      //置空sortBy，收起下拉列表
      this.sortBy = "";
    },
    //“筛选选项”中的配送方式选择
    selectDeliveryMode(id) {
      /**
       * 传入的参数为当前点击项的id
       * 初始状态this.delivery_mode为空。点击选中当前项filterNum加1
       */
      if (this.delivery_mode == null) {
        //this.filterNum++是所选中项的集合
        this.filterNum++;
        //用delivery_mode标记当前选中项
        this.delivery_mode = id;
        //delivery_mode为当前已有值时，清空所选项，并且filterNum减一
      } else if (this.delivery_mode == id) {
        //若当前已是选中状态,清空已选中的状态，filterNum减一
        this.filterNum--;
        this.delivery_mode = null;
        //delivery_mode已有值且不等于当前选择值，则赋值delivery_mode为当前所选id
      } else {
        //未选中状态下再次点击选中
        this.delivery_mode = id;
      }
    },
    /**
     * 点击商家活动，状态取反
     * 传入参数：下标值，该点击项的id值
     */
    selectSupportIds(index, id) {
      /**
       * 数组替换新的值
       * splice()方法从数组中添加/删除项目，然后返回被删除的项目
       * 点击某一项，support_ids中，与index下标对应的项的status变为true，标记为选中
       */
      this.support_ids.splice(index, 1, {
        status: !this.support_ids[index].status,
        /**
         * 第二次点击取消选中时,status由true--->false,选中的少了一个
         *下面循环计算filterNum值的时候也会少一个,选择的数量会展示在确认按钮那里
         */
        id,
      });
      /**
       * 重新计算filterNum的个数
       * 初始状态this.delivery_mode为null,this.filterNum值为0
       * filterNum为1的情况，“配送方式”是选中的状态
       */
      this.filterNum = this.delivery_mode == null ? 0 : 1;
      this.support_ids.forEach((item) => {
        if (item.status) {
          this.filterNum++;
          //status的状态为true,选中的filterNum值加1
        }
      });
    },
    //只有点击清空按钮才清空数据，否则一直保持原有状态
    clearSelect() {
      this.support_ids.map((item) => (item.status = false));
      this.filterNum = 0;
      this.delivery_mode = null;
    },
    //点击确认时，将需要筛选的id值传递给子组件，并且收回列表
    confirmSelectFun() {
      //状态改变时，因为子组件进行了监听，会重新获取数据进行筛选
      this.confirmStatus = !this.confirmStatus;
      this.sortBy = "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.food_container {
  padding-top: 3.6rem;
}
.sort_container {
  background-color: #fff;
  border-bottom: 0.025rem solid #f1f1f1;
  position: fixed;
  top: 1.95rem;
  right: 0;
  width: 100%;
  display: flex;
  z-index: 13;
  box-sizing: border-box;
  .sort_item {
    @include sc(0.55rem, #444);
    @include wh(33.3%, 1.6rem);
    text-align: center;
    line-height: 1rem;
    .sort_item_container {
      @include wh(100%, 100%);
      position: relative;
      z-index: 14;
      background-color: #fff;
      box-sizing: border-box;
      padding-top: 0.3rem;
      .sort_item_border {
        height: 1rem;
        border-right: 0.025rem solid $bc;
      }
    }
    .sort_icon {
      vertical-align: middle;
      transition: all 0.3s;
      fill: #666;
    }
  }
  .choose_type {
    .sort_item_container {
      .category_title {
        color: $blue;
      }
      .sort_icon {
        transform: rotate(180deg);
        fill: $blue;
      }
    }
  }
  .showlist-enter-active,
  .showlist-leave-active {
    transition: all 0.3s;
    transform: translateY(0);
  }
  .showlist-enter,
  .showlist-leave-active {
    opacity: 0;
    transform: translateY(-100%);
  }
  .sort_detail_type {
    width: 100%;
    position: absolute;
    display: flex;
    top: 1.6rem;
    left: 0;
    border-top: 0.025rem solid $bc;
    background-color: #fff;
  }
  .category_container {
    .category_left {
      flex: 1;
      background-color: #f1f1f1;
      height: 16rem;
      overflow-y: auto;
      span {
        @include sc(0.5rem, #666);
        line-height: 1.8rem;
      }
      .category_left_li {
        @include fj;
        padding: 0 0.5rem;
        .category_icon {
          @include wh(0.8rem, 0.8rem);
          vertical-align: middle;
          margin-right: 0.2rem;
        }
        .category_count {
          background-color: #ccc;
          @include sc(0.4rem, #fff);
          padding: 0 0.1rem;
          border: 0.025rem solid #ccc;
          border-radius: 0.8rem;
          vertical-align: middle;
          margin-right: 0.25rem;
        }
        .category_arrow {
          vertical-align: middle;
        }
      }
      .category_active {
        background-color: #fff;
      }
    }
    .category_right {
      flex: 1;
      background-color: #fff;
      padding-left: 0.5rem;
      height: 16rem;
      overflow-y: auto;
      .category_right_li {
        @include fj;
        height: 1.8rem;
        line-height: 1.8rem;
        padding-right: 0.5rem;
        border-bottom: 0.025rem solid $bc;
        span {
          color: #666;
        }
      }
      .category_right_choosed {
        span {
          color: $blue;
        }
      }
    }
  }
  .sort_list_container {
    width: 100%;
    .sort_list_li {
      height: 2.5rem;
      display: flex;
      align-items: center;
      svg {
        @include wh(0.7rem, 0.7rem);
        margin: 0 0.3rem 0 0.8rem;
      }
      p {
        line-height: 2.5rem;
        flex: auto;
        text-align: left;
        text-indent: 0.25rem;
        border-bottom: 0.025rem solid $bc;
        @include fj;
        align-items: center;
        span {
          color: #666;
        }
      }
      .sort_select {
        span {
          color: $blue;
        }
      }
    }
  }
  .filter_container {
    flex-direction: column;
    align-items: flex-start;
    min-height: 10.6rem;
    background-color: #f1f1f1;
    .filter_header_style {
      @include sc(0.4rem, #333);
      line-height: 1.5rem;
      height: 1.5rem;
      text-align: left;
      padding-left: 0.5rem;
      background-color: #fff;
    }
    .filter_ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.5rem;
      background-color: #fff;
      .filter_li {
        display: flex;
        align-items: center;
        border: 0.025rem solid #eee;
        @include wh(4.7rem, 1.4rem);
        margin-right: 0.25rem;
        border-radius: 0.125rem;
        padding: 0 0.25rem;
        margin-bottom: 0.25rem;
        svg {
          @include wh(0.8rem, 0.8rem);
          margin-right: 0.125rem;
        }
        span {
          @include sc(0.4rem, #333);
        }
        .filter_icon {
          @include wh(0.8rem, 0.8rem);
          font-size: 0.5rem;
          border: 0.025rem solid $bc;
          border-radius: 0.15rem;
          margin-right: 0.25rem;
          line-height: 0.8rem;
          text-align: center;
        }
        .activity_svg {
          margin-right: 0.25rem;
        }
        .selected_filter {
          color: $blue;
        }
      }
    }
    .confirm_filter {
      display: flex;
      background-color: #f1f1f1;
      width: 100%;
      padding: 0.3rem 0.2rem;
      .filter_button_style {
        @include wh(50%, 1.8rem);
        font-size: 0.8rem;
        line-height: 1.8rem;
        border-radius: 0.2rem;
      }
      .clear_all {
        background-color: #fff;
        margin-right: 0.5rem;
        border: 0.025rem solid #fff;
      }
      .confirm_select {
        background-color: #56d176;
        color: #fff;
        border: 0.025rem solid #56d176;
        span {
          color: #fff;
        }
      }
    }
  }
}
.showcover-enter-active,
.showcover-leave-active {
  transition: opacity 0.3s;
}
.showcover-enter,
.showcover-leave-active {
  opacity: 0;
}
.back_cover {
  position: fixed;
  @include wh(100%, 100%);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
